<template>
	<view class="wanl-live-message">
		<view class="wanl-live-comment">
			<view class="wanl-live-comment-item">
				
				 <scroll-view scroll-y="true" 
				 :show-scrollbar="false" 
				 :scroll-into-view="scrollToView" 
				 :scroll-with-animation="true" 
				 class="wanl-live-comment-item-scroll">
				 
					<!-- #ifdef APP -->
					<view class="wanl-live-comment-item-scroll-app" v-for="(item, index) in msgList" :key="index" :id="'msg' + index">
						<view class="wanl-live-comment-item-scroll-app-item">
							<text :class="[iscolor(item.form.id)]" class="app-text">{{item.form.name}}：</text>
							<text class="app-context">{{item.message}}</text>
						</view>
					</view>
					<!-- #endif -->
					
					<!-- #ifdef H5 -->
					<div class="wanl-live-comment-item-scroll-h5" v-for="(item, index) in msgList" :key="index" :id="'msg' + index">
					 	<div class="wanl-live-comment-item-tag">
					 		<text :class="[iscolor(item.form.id)]" class="mph5-text">{{item.form.name}}：</text>
							<text class="mph5-context">{{item.message}}</text>
					 	</div>
					</div>
					<!-- #endif -->
					
		            <!-- #ifdef MP -->
					<div class="wanl-live-comment-item-scroll-mp" v-for="(item, index) in msgList" :key="index" :id="'msg' + index">
					 	<div class="wanl-live-comment-item-tag">
					 		<text :class="[iscolor(item.form.id)]" class="mph5-text">{{item.form.name}}：</text>
							<text class="mph5-context">{{item.message}}</text>
					 	</div>
					</div>
		            <!-- #endif -->
					
		        </scroll-view>
				
				<view class="comment-box">
					<view class="comment-input-box">
						<input
							ref="commentInput"
							class="comment-input"
							v-model="msgText"
							placeholder="聊一聊"
							placeholder-class="placeholderClass"
							:adjust-position="true"
							confirm-type="send"
							@focus="handleFocus"
							@blur="handleBlur"
							@confirm="onSend"
						/>
						
						<text class="send-btn" @click="onSend()">发送</text>
					</view>
					
					<view class="comment-icon-box">
					<!-- 	<view class="shang-btn" @tap="openPop()">
							<image src="/static/images/shang2.png" class="shang-image"></image>
						</view> -->
						
						<view class="gift-btn" @tap="openGiftPop()">
							<image src="/static/images/gift.png" class="gift-image"></image>
						</view>
						
						<view class="shang-btn" @tap="openRedpacket()">
							<image src="/static/images/shang2.png" class="shang-image"></image>
						</view>
					</view>
					
				</view>
			</view>
			
		</view>
		
		<uniTransition 
			:mode-class="['slide-left']" 
			:styles="{ 'position':'absolute', 'left':'0', 'top':'-60rpx', }"
			:show="comingShow">
			<view class="wanl-live-coming">
				<text class="wanl-live-coming-text">{{comingName}} 他来了他来了~</text>
			</view>
		</uniTransition>
		
		
		<!-- 打赏主播 -->
		<view class="live-popup" v-if="isShowPopup">
			<uniPopup ref="money" type="bottom">
				<view class="live-popup">
					<view class="live-popup-title">
						<text class="live-popup-title-text">打赏主播</text>
						<image src="/static/images/close.png"  class="live-popup-title-close-text" 
						@tap="isShowPopup=false"></image>
					</view>
					
					<scroll-view :show-scrollbar="false" scroll-y="true" class="live-popup-list">
						<view class="start-list">
							<text class="category-title">打赏金额</text>
						</view>
						
						<input placeholder="请输入打赏金额" type="number" v-model="money" placeholder-class="input-placeholder"/>
					</scroll-view>
					
					<view class="live-popup-start live-control-right-start" 
					:style="{bottom: statusFootHeight + 9 + 'px'}"
					 @tap="daShangMake()">
						<text class="live-control-right-start-text">确认打赏</text>
					</view>
					
					<!-- 多终端兼容性 -->
					<view :style="{height: statusFootHeight + 'px'}"></view>
				</view>
			</uniPopup>
		</view>
		
		
		<!-- 刷礼物 -->
		<view class="live-popup live-popup-gift" v-if="isShowGiftPopup">
			<uniPopup ref="gift" type="bottom">
				<view class="live-popup live-popup-gift">
					<view class="live-popup-title">
						<text class="live-popup-title-text text-white">礼物</text>
						<image src="/static/images/close.png"  class="live-popup-title-close-text" 
						@tap="isShowGiftPopup=false"></image>
					</view>
					
					<scroll-view 
					:show-scrollbar="false" 
					scroll-y="true" 
					class="live-popup-list2" 
					:style="{height: '400rpx'}">
						<view class="gift-box">
							<view :class="index === gift_index ? 'gift-item-active' : 'gift-item'" 
							v-for="(item, index) in giftList" :key="index"
							@click="changeGift(index)"
							>
								<image :src="item.image" class="gift-pic"></image>
								<text class="gift-title">{{item.name}}</text>
								<text class="gift-price">{{item.price}}</text>
								
								<view class="gift-item-bottom">
									<text class="gift-small-btn"
									@click.stop="sendGift(item)"
									v-if="index === gift_index">赠送</text>
								</view>
							</view>
						</view>
						
					</scroll-view>
					
					<!-- 多终端兼容性 -->
					<view :style="{height: statusFootHeight + 'px'}"></view>
				</view>
			</uniPopup>
		</view>
		
		
	</view>
</template>

<script>
	import uniTransition from '@/components/uni-transition/uni-transition';
	import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	import {BASE_URL} from '@/env.js'
		
	export default {
		components: {
			uniTransition,
		},
		name: "LiveMessage",
		data() {
			return {
				msgText:'',
				scrollToView: 'msg1',
				comingShow: false,
				comingName: '',
				watchTimer: null,
				msgList: [],
				likeList: [],
				isShowPopup:false,
				money:'',
				isShowGiftPopup:false,
				gift_index:0,
				giftList:[
					// {
					// 	image: '/static/images/default/screen_icon_new.png',
					// 	title: '小心心',
					// 	price:10,
					// },
					
				],
				userInfo:{},
			};
		},
		props: {
			liveData: {
				type: Object,
				default: null
			},
			statusFootHeight: {
				default: 0
			},
		},
		created() {
			uni.$on('onMessageLive', this.parseMsgStatus);
			this.userInfo = this.$store.state.user;
			//让用户加入直播间
			this.sendWs('', 'jr');
		},
		computed: {
			isClose() {
				if (this.$store.state.chat.isOnline) {
					return this.$store.state.chat.close;
				}else{
					return false;
				}
			}
		},
		methods: {
			// 解析链接状态
			parseMsgStatus(obj) {
				//let obj = JSON.parse(msgStr);
				console.log("go parseMsgStatus", obj);
				switch (obj.type) {
					case 'data':	
						this.$emit('changeOnlineNum', obj.data.message);
						break;
						
					case 'message':
						//如果是自己发送的消息，则不展示
						if(obj.data.form.id == this.userInfo.id){
							return false;
						}
						
						this.msgList.push(this.parseMsg(obj.data.message, obj.data.form));
						
						this.$nextTick(() => {
							this.scrollToView = `msg${this.msgList.length - 1}`;
						});
						
						uni.vibrateLong();
						break;
						
					default:
				}
				
			},
			
			// 解析消息类型,接受数据时才用，发送数据时不用。
			parseMsg(message, fromuser) {
				let obj = null;
				switch (message.message_type) {
					case 'text':
						obj = {
							createtime: message.createtime,
							is_my:false,
							message: message.message,
							message_type: message.message_type,
							form: fromuser
						};
						break;
						
					case 'gift':
						obj = {
							createtime: message.createtime,
							is_my:false,
							message: '赠送了【'+message.message.name+'】',
							message_type: message.message_type,
							form: fromuser
						};
			
						this.$emit('showGift', message.message.svg);
						break;
						
					default:
						break;
				}
				return obj;
			},
			
			//用户退出
			quit(){
				//发送退出消息
				console.log("play go quit");
				this.sendWs('', 'tc');
			},
			onSend(){
				if (this.msgText) {
					this.sendWs(this.msgText);
					this.pushChat(this.msgText);
					this.msgText = '';
				}
			},
			// 发送服务数据
			async sendWs(data, type = 'text') {
				let msg = {
					type: 'message_live',
					data:{
						to: this.liveData.id
					},
					message: {
						message_type: type,
						message: data
					},
					form: {
						id: this.userInfo.id,
						avatar: this.userInfo.avatar,
						name: this.userInfo.nickname,
					},
				};
				let strMsg = JSON.stringify(msg);
				console.log("发送消息内容", strMsg);
				this.$store.dispatch('chat/send', strMsg);
			},	
			// 发送本地数据。
			pushChat(data, type = 'text') {
				console.log("go pushChat", data, type);
				if (this.isClose) {
					uni.showToast({title: '您已掉线！请返回重试', icon: 'none'});
					return;
				}
	
				this.msgList.push({
					is_my: true,
					type: 'message_live',
					message_type: type,
					message: data,
					form:{
						name: this.userInfo.nickname,
						avatar: this.userInfo.avatar,
						id: this.userInfo.id,
					},
					createtime: this.dateFormat("yyyy-MM-dd hh:mm:ss")
				});
				
				this.msgText = '';
				this.$nextTick(() => {
					this.scrollToView = `msg${this.msgList.length - 1}`;
				});
			},
			
			onMessage(msg) {
				var message = msg.message;
				var form = msg.form;
				if (message.type == 'msg' || 
				    message.type == 'seek' || 
					message.type == 'follow' || 
					message.type =='like' || 
					message.type == 'review') 
				{
					if(message.type =='like'){
						this.likeStart();
					}
					this.msgList.push({
						form: form,
						text: message.text
					});
					
					this.$nextTick(() => {
						this.scrollToView = `msg${this.msgList.length - 1}`;
					});
					
				}else if (message.type == 'coming') {
					if (this.comingShow) {
						clearTimeout(this.watchTimer);
						this.comingShow = false;
					}
					this.comingName = form.name;
					this.openComing();
				}
			},
			openComing() {
				this.comingShow = true;
				this.watchTimer = setTimeout(() => {
					this.comingShow = false;
				}, 1000);
			},
			iscolor(id) {
				return ['text-blue', 'text-white', 'text-orange', 'text-yellow', 'text-brown', 'text-olive', 'text-green','text-red', 'text-pink', 'text-purple'][parseInt(id % 10)]
			},
			handleFocus(){
				//console.log("go handleFocus");
			},
			handleBlur(){
				//console.log("go handleBlur");
			},
			dateFormat(fmt){
				let date = new Date();
				
				var o = {
				    "M+": date.getMonth() + 1, //月份
				    "d+": date.getDate(), //日
				    "h+": date.getHours(), //小时
				    "m+": date.getMinutes(), //分
				    "s+": date.getSeconds(), //秒
				    "q+": Math.floor((date.getMonth() + 3) / 3), //季度
				    "S": date.getMilliseconds() //毫秒
				};
				if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
				for (var k in o)
				    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			},
			async handlePopup(type, method){
				console.log("handlePopup", type, method);
				this.$refs[type][method]();
			},
			openPop(){
				let that = this;
				that.money = '';
				that.isShowPopup = true;
				that.isShowGiftPopup = false;
			},
			openGiftPop(){
				let that = this;
				that.isShowGiftPopup = true;
				that.isShowPopup = false;
				that.loadGift();
			},
			daShangMake(){
				let that = this;
				if(Number(that.money) <= 0){
					uni.showToast({title: '请输入打赏金额', icon: 'none'});
					return false;
				}
				
				uni.request({
					url: '/user/dshbmoney',
					data:{
						money: that.money,
						id: that.liveData.user.id,
					},
					success: res => {
						if(res.data.code===1){
							let txt = '打赏了'+that.money+'元';
							that.sendWs(txt);
							that.pushChat(txt);
							that.isShowPopup = false;
						}
					}
				});
			},
			loadGift(){
				let that = this;
				
				uni.request({
					url: '/live/gift',
					data:{},
					success: res => {
						res = res.res
						if(res.code===1){
							that.giftList = res.data;
						}
					}
				});	
			},
			sendGift(item){
				let that = this;
				
				uni.showModal({
					title: '赠送礼物',
					content: '确认赠送该礼物？',
					success: function (res) {
						if (res.confirm) {
							uni.request({
								url: '/live/reward',
								data:{
									id: item.id,
									live_id: that.liveData.id,
								},
								success: res => {
									res = res.res
									if(res.code===1){
										that.isShowGiftPopup = false;
										that.$emit('showGift', res.data.svg);
										
										that.sendWs(res.data, 'gift');
										that.pushChat('您赠送了【'+res.data.name+ '】', 'gift');
									}
									else{
										uni.showToast({title: res.msg, icon: 'none'});
									}
								}
							});
							
						} else if (res.cancel) {
							
						}
					}
				});
			},
			changeGift(index){
				if(this.gift_index === index){
					this.gift_index = '';
				}else{
					this.gift_index = index;
				}
			},
			openRedpacket(){
				uni.navigateTo({
					url:'/pages/new/live/redpacket'
				});
			}
			
		}
	};
</script>


<style>
	
/* 群组消息 */
.wanl-live-comment{
	/* #ifndef APP */
	/*-webkit-mask: -webkit-gradient(linear,left 30%,left top,from(#000),to(transparent));*/
	/* #endif */
	
	margin-left: 25rpx;
	margin-right: 25rpx;
	justify-content: space-between;
	flex-direction: row;
	position: relative;
}

.wanl-live-comment-item{
	overflow: hidden;
	color: #FFFFFF;
	flex: 1;
}
.wanl-live-comment-item-scroll{
	/* #ifdef H5 || MP */
	max-height: 500rpx;
	min-height: 400rpx;
	/* #endif */
	
	/* #ifdef APP */
	height: 500rpx;
	/* #endif */
}

/* #ifdef H5 || MP */
.wanl-live-comment-item-scroll-h5{
	margin-top: 6rpx;
	overflow: hidden;
	display: flex;
}
			
.wanl-live-comment-item-scroll-mp{
	margin-bottom: 6rpx;
	overflow: hidden; 
	display: block;
}

.wanl-live-comment-item-tag{
	background-color: rgba(0,0,0,.2);
	padding-top: 8rpx;
	padding-right: 16rpx;
	padding-bottom: 8rpx;
	padding-left: 16rpx;
	border-radius: 10rpx;
	overflow: hidden;
	display: inline-block;
}
				
/* #endif */
.wanl-live-comment-item-scroll-app{
	flex-direction: row;
	margin-top: 6rpx;
}

.wanl-live-comment-item-scroll-app-item{
	background-color: rgba(0,0,0,.2); 
	padding-top: 8rpx;
	padding-right: 16rpx;
	padding-bottom: 8rpx;
	padding-left: 16rpx;
	border-radius: 10rpx;
	flex-direction: row;
}
	
/* 点赞特效	 */
.wanl-live-like{
	position: relative;
	/* #ifndef APP */
	flex: 0 0 120rpx;
	/* #endif */
	width: 120rpx; 
	height: 500rpx;
}

/* #ifndef APP */
.bubble {
	position: absolute;
	width: 90rpx;
	height: 90rpx;
	bottom: 0;
	background-repeat: no-repeat;
	background-size: 100%;
	transform-origin: bottom;
}	
.b1 {background-image: url(/static/images/live/1.png);}
.b2 {background-image: url(/static/images/live/2.png);}
.b3 {background-image: url(/static/images/live/3.png);}
.b4 {background-image: url(/static/images/live/4.png);}
.b5 {background-image: url(/static/images/live/5.png);}
.b6 {background-image: url(/static/images/live/6.png);}
.bl1 {animation: bubble_1 3s linear 1 forwards,bubble_big_1 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
.bl2 {animation: bubble_2 3s linear 1 forwards,bubble_big_2 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
.bl3 {animation: bubble_3 3s linear 1 forwards,bubble_big_1 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
.bl4 {animation: bubble_4 3s linear 1 forwards,bubble_big_2 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
.bl5 {animation: bubble_5 3s linear 1 forwards,bubble_big_1 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
.bl6 {animation: bubble_6 3s linear 1 forwards,bubble_big_3 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
.bl7 {animation: bubble_7 3s linear 1 forwards,bubble_big_1 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
.bl8 {animation: bubble_8 3s linear 1 forwards,bubble_big_3 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
.bl9 {animation: bubble_9 3s linear 1 forwards,bubble_big_2 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
.bl10 {animation: bubble_10 3s linear 1 forwards,bubble_big_1 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
.bl11 {animation: bubble_11 3s linear 1 forwards,bubble_big_2 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
@keyframes bubble_11 {0% {}25% {margin-left: -20rpx;}50% {margin-left: -20rpx;}100% {margin-left: -36rpx;}}
@keyframes bubble_10 {0% {}25% {margin-left: -40rpx;}50% {margin-left: -40rpx;}100% {margin-left: -40rpx;}}
@keyframes bubble_9 {0% {}25% {margin-left: 20rpx;}50% {margin-left: 20rpx;}100% {margin-left: 20rpx;}}
@keyframes bubble_8 {0% {}25% {margin-left: 40rpx;}50% {margin-left: 40rpx;}100% {margin-left: 40rpx;}}
@keyframes bubble_7 {0% {}25% {margin-left: 6rpx;}50% {margin-left: 2rpx;}75% {margin-left: 4rpx;}100% {margin-left: 6rpx;}}
@keyframes bubble_6 {0% {}25% {margin-left: -6rpx;}50% {margin-left: -2rpx;}75% {margin-left: -4rpx;}100% {margin-left: -6rpx;}}
@keyframes bubble_5 {0% {}25% {margin-left: 10rpx;}50% {margin-left: -10rpx;}75% {margin-left: -20rpx;}100% {margin-left: -40rpx;}}
@keyframes bubble_4 {0% {}25% {margin-left: -10rpx;}50% {margin-left: -10rpx;}75% {margin-left: 40rpx;}100% {margin-left: 20rpx;}}
@keyframes bubble_3 {0% {}25% {margin-left: -40rpx;}50% {margin-left: 20rpx;}75% {margin-left: 40rpx;}100% {margin-left: -20rpx;}}
@keyframes bubble_2 {0% {}25% {margin-left: 40rpx;}50% {margin-left: 50rpx;}75% {margin-left: 20rpx;}100% {margin-left: 10rpx;}}
@keyframes bubble_1 {0% {}25% {margin-left: -16rpx;}50% {margin-left: 16rpx;}75% {margin-left: -30rpx;}100% {margin-left: 30rpx;}}
@keyframes bubble_big_1 {0% {transform: scale(0.3);}100% {transform: scale(1.2);}}
@keyframes bubble_big_2 {0% {transform: scale(0.3);}100% {transform: scale(0.9);}}
@keyframes bubble_big_3 {0% {transform: scale(0.3);}100% {transform: scale(0.6);}}
@keyframes bubble_y {0% {margin-bottom: 0;}10% {margin-bottom: 0;}75% {opacity: 1;}100% {margin-bottom: 400rpx;opacity: 0;}}
/* #endif */

/* 欢迎信息 */
.wanl-live-coming {
	margin-left: 25rpx;
	background-color: rgba(255, 86, 136, .7);
	padding-top: 8rpx;
	padding-right: 16rpx;
	padding-bottom: 8rpx;
	padding-left: 16rpx;
	border-radius: 10rpx;
}
	
.wanl-live-coming-text {
	color: #ffffff;
	font-size: 28rpx;
}
		
.app-text{
	font-size: 29rpx;
}

.app-context{
	font-size: 29rpx;
	color: #ffffff;
}

.mph5-text{
	font-size: 26rpx;
}

.mph5-context{
	font-size: 26rpx;
	color: #ffffff;
}

.text-white{
    color: #ffffff !important;
}

.text-orange{
    color: #fe6600 !important;
}

.text-yellow{
    color: #ffff00 !important;
}

.text-green{
    color: #39b54a !important;
}

.text-olive{
    color: #8dc63f !important;
}

.text-purple{
    color: #6739b6 !important;
}

.text-pink{
    color: #F840B1 !important;
}

.text-blue {
	color: #0081ff !important;
}

.text-brown {
	color: #a5673f !important;
}

.text-red {
	color: #ff243a !important;
}

.comment-box{
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 20rpx;
	justify-content: space-between;
}

.comment-input{
	background-color: rgba(255,255,255,0.2);
	margin-right: 20rpx;
	border-radius: 40rpx;
	font-size: 28rpx;
	color: #fff;
	padding: 0rpx 30rpx;
	height: 70rpx;
	width: 440rpx;
}

.send-btn{
	font-size: 28rpx;
	color: white;
}

.placeholderClass{
	font-size: 28rpx; 
	color: #999999;
	padding: 0rpx 30rpx;
}

.change-image{
	width: 60rpx;
	height: 60rpx;
	margin-right: 20rpx;
}

/* 弹框 */
.live-popup{
	position: relative;
	background: #fff;
	padding-left: 18rpx;
	padding-right: 18rpx;
	border-top-left-radius: 18rpx;
	border-top-right-radius: 18rpx;	
}	
.live-popup-title {
	height: 100rpx;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.live-popup-title-text {
	font-size: 32rpx;
}

.live-popup-title-close-text{
	width: 40rpx;
	height: 40rpx;
}

.live-popup-list{
	margin-bottom: 216rpx;
}		

.live-popup-list2{
	margin-bottom: 20rpx;
}	
		
.live-popup-start {
	position: absolute;
	right: 18rpx;
	left: 18rpx;
}
.live-control-right-start{
	display: flex;
	background: #f40;
	align-items: center;
	justify-content: center;
	height: 76rpx;
	border-radius: 40rpx;
}

.live-control-right-start-text{
	color: #fff;
	font-size: 30rpx;
	height: 76rpx;
	line-height: 76rpx;
}
.category-title{
	font-size: 28rpx;
}
.input-placeholder{
	font-size: 28rpx;
}

.gift-btn, .shang-btn{
	width: 80rpx;
	height: 80rpx;
	background: rgba(0,0,0,0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 10rpx;
}

.gift-image{
	width: 40rpx;
	height: 40rpx;
}

.shang-image{
	width: 44rpx;
	height: 44rpx;
}

.comment-input-box, .comment-icon-box{
	display: flex;
	flex-direction: row;
	align-items: center;
}

.gift-box{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
	color:#ffffff !important;
	overflow: hidden !important;
}

.gift-item{
	width: 158rpx;
	margin-right: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-bottom: 40rpx;
	padding: 20rpx 0rpx 0rpx 0rpx;
	color:#ffffff !important;
	overflow: hidden !important;
}

.gift-item-active{
	width: 158rpx;
	margin-right: 14rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-bottom: 40rpx;
	border: 2rpx solid #696b78;
	background-color: #282b34;
	padding: 20rpx 0rpx 0rpx 0rpx;
	border-radius: 16rpx;
	overflow: hidden !important;
	color:#ffffff !important;
}

.gift-pic{
	width: 100rpx;
	height: 100rpx;
}

.gift-title{
	font-size: 26rpx;
	margin-top:10rpx;
	color:#ffffff !important;
}

.gift-price{
	font-size: 20rpx;
	margin-top:4rpx;
	color:#ffffff !important;
}

/* .gift-item:nth-child(4n){
	margin-right: 0rpx;
} */

.gift-small-btn{
	background-color: #ff004e;
	color:#ffffff !important;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 160rpx;
	height: 50rpx;
	border-radius: 0rpx 0rpx 16rpx 16rpx;
	overflow: hidden;
	border-bottom-left-radius: 16rpx !important;
	border-bottom-right-radius: 16rpx !important;
	text-align: center;
	line-height: 50rpx;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
}

.gift-item-bottom{
	border-radius: 0rpx 0rpx 16rpx 16rpx !important;
}

.live-popup-gift{
	background: #151724 !important;
}
</style>
